<template>
  <div
    ref="rootRef"
    class="suggest"
    v-loading:[loadingText]="!singer && !songs.length && hasMore"
    v-no-result="noResult"
  >
    <ul class="suggest-list">
      <li
        class="suggest-item"
        v-if="singer"
        @click="selectSinger(singer)"
      >
        <div class="icon">
          <i class="icon-mine"></i>
        </div>
        <div class="name">
          <p class="text">{{singer.name}}</p>
        </div>
      </li>
      <li
        class="suggest-item"
        v-for="song in songs"
        :key="song.id"
        @click="selectSong(song)"
      >
        <div class="icon">
          <i class="icon-music"></i>
        </div>
        <div class="name">
          <p class="text">
            {{song.singer}}-{{song.name}}
          </p>
        </div>
      </li>
      <div class="suggest-item" v-loading:[loadingText]="pullupLoading"></div>
    </ul>
  </div>
</template>

<script>
import { computed, nextTick, ref, watch } from 'vue';
import { search } from '@/service/search';
import { procressSongs } from '@/service/song';
import usePullUpLoad from './use-pull-up-load';

export default {
  name: 'suggest',
  props: {
    query: String,
    // 是否检索歌手信息
    showSinger: {
      type: Boolean,
      default: true
    }
  },
  emits: ['select-song', 'select-singer'],
  setup(props, { emit }) {
    const singer = ref(null);
    const songs = ref([]);
    // 是否还有更多标识
    const hasMore = ref(true);
    const page = ref(1);
    const loadingText = ref('');
    // makeItScrollable标识
    const manualLoading = ref(false);

    const loading = computed(() => {
      return !singer.value && !songs.value.length;
    });

    const preventPullUpload = computed(() => {
      return loading.value || manualLoading.value;
    });

    const noResult = computed(() => {
      return !singer.value && !songs.value.length && !hasMore.value;
    });

    const pullupLoading = computed(() => {
      return isPullUpLoad.value && hasMore.value;
    });

    const { isPullUpLoad, rootRef, scroll } = usePullUpLoad(searchMore, preventPullUpload);

    watch(() => props.query, async (newQuery) => {
      if (!newQuery) {
        return;
      }
      await searchFirst();
    });

    async function searchFirst() {
      // 当输入内容为空时return
      if (!props.query) {
        return;
      }
      page.value = 1;
      songs.value = [];
      singer.value = null;
      hasMore.value = true;

      const result = await search(props.query, page.value, props.showSinger);
      console.log(result, 'result');
      songs.value = await procressSongs(result.songs);
      console.log(songs.value, 'songs.value');
      singer.value = result.singer;
      hasMore.value = result.hasMore;
      // 数据变化需要生成DOM
      await nextTick();
      await makeItScrollable();
    }

    async function searchMore() {
      // 当没有下一页数据或者输入内容为空时return
      if (!hasMore.value || !props.query) {
        return;
      }
      page.value++;
      const result = await search(props.query, page.value, props.showSinger);
      songs.value = songs.value.concat(await procressSongs(result.songs));
      hasMore.value = result.hasMore;
      console.log(scroll.value.maxScrollY, 'scroll');
      // 数据量判断
      await makeItScrollable();
    }

    // bug: 此处接口会过滤掉付费歌曲,有可能一页歌曲都是付费歌曲,会直接返回空数组,或者只返回几首歌曲,不足一屏数据,此时需要再次请求,直到数据量填充满一屏
    async function makeItScrollable() {
      // 当scroll.value.maxScrollY >= -1说明不可滚动,容器高度大于内容高度
      if (scroll.value.maxScrollY >= -1) {
        manualLoading.value = true;
        await searchMore();
        manualLoading.value = false;
      }
    }

    function selectSong(song) {
      emit('select-song', song);
    }

    function selectSinger(singer) {
      emit('select-singer', singer);
    }

    return {
      selectSong,
      noResult,
      singer,
      songs,
      hasMore,
      page,
      loadingText,
      rootRef,
      pullupLoading,
      selectSinger
    };
  }
};
</script>

<style lang="scss" scoped>
  .suggest {
    height: 100%;
    overflow: hidden;
    .suggest-list {
      padding: 0 30px;
      .suggest-item {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        .icon {
          flex: 0 0 30px;
          width: 30px;
          [class^="icon-"] {
            font-size: 14px;
            color: $color-text-d;
          }
        }
        .name {
          flex: 1;
          font-size: $font-size-medium;
          color: $color-text-d;
          overflow: hidden;
          .text {
            @include no-wrap();
          }
        }
      }
    }
  }
</style>
